<!--
 * @Author: Charsen
 * @Date: 2025-07-24 08:33
 * @LastEditors: wjc
 * @LastEditTime: 2025-10-28 11:27:27
 * @Description: 
-->
<template>
  <Content>
    <div class="flex-y-center mb-10px justify-between">
      <SearchFormer
        :data="searchFormer.data"
        :fields="searchFormer.fields"
        @on-confirm="handleSearchChange"
        @on-reset="handleSearchChange"
      />
      <div>
        <OptionAdd v-action="actions.add" @on-add="goCreatePage" />
        <OptionTrashed
          v-action="actions.trashed"
          :entity="entity"
          :trashed-route="getTrashedRoute()"
          class="ml-20px"
          :show-text="true"
        />
      </div>
    </div>

    <el-row v-loading="listLoading" :gutter="20">
      <el-col v-if="list.length === 0 && !listLoading">
        <el-empty description="暂无数据" />
      </el-col>
      <el-col v-for="(item, index) in list" v-else :key="index" :span="8">
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <Imager
            :height="200"
            :url="item.page_cover_url"
            :width="500"
            :preview="false"
            model="crop"
            class="w-full! cursor-pointer"
            @on-click="goShowPage(item.id)"
          />
          <div class="card-info">
            <span class="router-link" @click="goShowPage(item.id)">{{ item.page_title }}</span>
          </div>
          <div class="card-bottom">
            <i class="i-custom-hash color-primary font-s-10px mr-4px"></i>
            <span class="font-s-14px color-info">{{ item.page_type_txt }}</span>
            <el-divider direction="vertical" />
            <ListTimer :created="item.created_at" :updated="item.updated_at" />
            <Options
              :id="item.id"
              :actions="actions"
              :index="index"
              :options="item.options"
              class="mt-5px mr--8px float-right"
              @on-edit-page="goEditPage"
              @on-del="handleDestroy"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <Pagination
      v-model:limit="pageFormer.page_limit"
      v-model:page="pageFormer.page"
      :total="pageFormer.total"
      @on-changed="fetchData"
    />
  </Content>
</template>

<script setup lang="ts">
  import { useDestroy } from '#/hooks/useDestroy'
  import { useLister } from '#/hooks/useLister'
  import { getActions } from '#/utils/auth'

  defineOptions({
    name: `PageIndex`,
  })
  const entity = 'Page'
  const actions = getActions('platform-page', { show: 'whitelist' })

  const {
    list,
    listLoading,
    searchFormer,
    pageFormer,
    handleSearchChange,
    fetchData,
    goCreatePage,
    goEditPage,
    goShowPage,
    getTrashedRoute,
  } = useLister({ entity })

  const { handleDestroy } = useDestroy({ entity, list })

  onMounted(() => {
    fetchData()
  })
</script>

<style lang="scss" scoped>
  .el-card {
    @apply mb-20px;
  }

  .card-info {
    @apply py-10px px-20px lh-25px;
  }

  .card-bottom {
    @apply px-20px pb-20px;
  }
</style>
